<template id="tmp-item-select">
    <div>
        <el-card v-if="curItem" shadow="never" :body-style="{ padding: '0px' }">
            <div class="clearfix">
                <img :src="curItem.iconPath" style="float: left;height: 100%;width: auto;margin-right: 5px;">
                <div>
                    <component-item-name :name="curItem.name" :quality="curItem.Quality"></component-item-name>
                    <div style="text-align: end">
                        <el-button type="text" @click="showSelector=true">修改</el-button>
                    </div>

                </div>
            </div>
        </el-card>
        <el-button v-else @click="showSelector=true">选择物品</el-button>

        <el-dialog
            :show-close="false"
            :visible.sync="showSelector"
            width="80%" append-to-body>
            <div class="mt-3 text-right">

                <el-form :inline="true" size="mini" class="demo-form-inline">
                    <el-form-item label="entry">
                        <el-input v-model="search.entry" placeholder="entry" :clearable="true" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="名称">
                        <el-input v-model="search.key" placeholder="名称" :clearable="true" maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-cascader
                            placeholder="请选择类型"
                            :options="itemClass"
                            v-model="search.class"
                            :clearable="true"
                            :props="{ expandTrigger: 'hover' }"></el-cascader>
                    </el-form-item>
                    <el-form-item label="级别">
                        <el-select v-model="search.quality" :clearable="true" placeholder="请选择级别">
                            <el-option label="灰色粗糙" :value="0"></el-option>
                            <el-option label="白色普通" :value="1"></el-option>
                            <el-option label="绿色精良" :value="2"></el-option>
                            <el-option label="蓝色优秀" :value="3"></el-option>
                            <el-option label="紫色" :value="4"></el-option>
                            <el-option label="橙装" :value="5"></el-option>
                            <el-option label="金色" :value="6"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                    </el-form-item>
                </el-form>


            </div>
            <el-table
                :data="list"
                style="width: 100%">
                <el-table-column
                    prop="entry"
                    width="80"
                    label="entry">
                </el-table-column>
                <el-table-column
                    prop="iconPath"
                    label=""
                    width="80">
                    <template slot-scope="scope">
                        <img :src="scope.row.iconPath" style="height: 40px; width: 40px" alt="">
                    </template>
                </el-table-column>
                <el-table-column
                    prop="RequiredLevel"
                    width="80"
                    label="需要等级">
                </el-table-column>
                <el-table-column
                    prop="ItemLevel"
                    width="80"
                    label="物品等级">
                </el-table-column>
                <el-table-column
                    label="类型"
                    width="200">
                    <template slot-scope="scope">
                        <component-item-class :item="scope.row"></component-item-class>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="名称">
                    <template slot-scope="scope">
                        <component-item-name :name="scope.row.name" :quality="scope.row.Quality"></component-item-name>
                    </template>
                </el-table-column>
                <el-table-column
                    width="200">
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="small" @click="handleSelect(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
                {{--            <el-table-column
                                prop="Quality"
                                label="Quality">
                            </el-table-column>--}}

            </el-table>
            <div class="text-center mt-3" v-if="list">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="search.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="search.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="search.total">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showSelector=false">关闭</el-button>
          </span>
        </el-dialog>
    </div>
</template>
<script>
    Vue.component("component-item-select", {
        props:["entry"],
        data() {
            return {
                list:[],
                curItem:null,
                showSelector:false,
                itemClass:itemClass,
                search: {
                    entry:'',
                    key:'',
                    quality:'',
                    class:[],
                    size: 10,
                    page:1,
                    total: 1,
                }
            };
        },
        template:"#tmp-item-select",
        mounted() {
        },
        methods: {
            getList(){
                post('itemList', this.search,res=>{
                    console.log(res);
                    this.list=res.data.data;
                    this.search.total=res.data.total;
                },this)
            },
            handleSelect(item){
                this.curItem=item;
                this.$emit('update:entry', item.entry);
                this.showSelector=false;
            },
            handleSearch(){
                this.search.page=1;
                this.getList();
            },
            handleSizeChange(size){
                this.search.size=size;
                this.getList();
            },
            handleCurrentChange(page){
                this.search.page=page;
                this.getList();
            }
        }
    });
</script>

<style>
    .is-never-shadow{
        border: none;
    }
</style>
